<template>
	<view class="address">
		<NavBar title="收货地址"/>
		<view class="address-list" v-if="addressList.length">
			<Item :addressInfo="item" v-for="(item, index) in addressList" :key="item" @tap="checkAddress(item)" :isEdit="isChecked" />
		</view>
		<Empty txt="还没有添加收货地址哦~" v-else/>
		<view class="btn" @tap="addAddress"> 新增地址 </view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import Item from './components/Item.vue';
	import Empty from '@/components/Empty.vue';
	import NavBar from '@/components/NavBar.vue';
	import { useAddressStore } from '@/store/index.js'
	const addAddress = () => {
		uni.navigateTo({
			url: '/pages/address/addEditAddress'
		})
	}
	const addressList = computed(() => {
		const { addressList } = useAddressStore()
		return addressList
	})
	const page = ref()
	const total = ref()
	const page_size = ref(20)
	const isChecked = ref() // 判断是否是从别的页面过来的
	const checkAddress = (info) => {
		if(isChecked.value) {
			const { SETCHECKEDADDRESS } = useAddressStore()
			SETCHECKEDADDRESS(info)
			uni.navigateBack()
		}
	}
	const getAddressList = () => {
		const { SETADDRESS } = useAddressStore()
		SETADDRESS(page.value, page_size.value)
	}
	onLoad((e) => {
		const { checked } = e
		isChecked.value = checked
		getAddressList()
	})
</script>

<style lang="scss" scoped>
	.address {
		.address-list, .add-edit {
			padding: 10px 12px;
		}
		.btn {
			position: fixed;
			bottom: 12px;
			left: 12px;
			right: 12px;
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>
